<!--
 * @Author: liujixiang
 * @Date: 2020-07-30 10:37:53
 * @LastEditTime: 2020-08-05 20:10:43
 * @LastEditors: Please set LastEditors
 * @Description: 甬道
 * @FilePath: \devops\VueElementUINew\src\components\QGrep\index.vue
--> 

<template>
  <div class="q-grep">
    <div v-for="(item, index) in group" :key="index">
      <div>{{ item.name }}</div>
      <ul :ref="`grep${item.id}`">
        <li v-for="(need, index) in item.list" :key="index">{{ need.title }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
import Sortable from 'sortablejs'
export default {
  name: 'QGrep',
  props: {
    group: {
      type: Array,
      default: () => {
        return [{
          id: 1,
          name: '待处理',
          list: [{
            title: '待处理测试一'
          }, {
            title: '待处理测试二'
          }, {
            title: '待处理测试三'
          }]
        }, {
          id: 2,
          name: '研发中',
          list: [{
            title: '研发中测试一'
          }, {
            title: '研发中测试二'
          }, {
            title: '研发中测试三'
          }]
        }, {
          id: 3,
          name: '测试中',
          list: [{
            title: '测试中测试一'
          }, {
            title: '测试中测试二'
          }, {
            title: '测试中测试三'
          }]
        }]
      }
    }
  },
  data() {
    return {
      
    }
  },
  mounted() {
    this.bindSortable()
  },
  methods: {
    bindSortable() {
      this.group.map(v => {
        new Sortable(this.$refs[`grep${v.id}`][0], {
          group: 'shared',
          animation: 150
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.q-grep {
  background-color: #FFF;
  display: flex;
  ul {
    li {
      list-style: none;
      width: 260px;
      height: 150px;
      box-shadow: 0px 2px 9px 1px rgba(0, 0, 0, 0.1);
      border-radius: 4px;
      &:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }
}
</style>